<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="clock.css">
</head>

<body>
    <div class="clock">
        <div class="panel">
            <div class="dial-container">
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
            </div>
            <div class="pan"></div>
            <div class="hand hour"></div>
            <div class="hand minute"></div>
            <div class="hand secend"></div>
            <div class=" circle"></div>
        </div>
    </div>
    <button id="btn">点击</button>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <script>
        var now = new Date();
        var sHand = document.querySelector('.secend');
        var mHand = document.querySelector('.minute');
        var hHand = document.querySelector('.hour');


        function setTime(date) {
            date = date || new Date()

            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            //354-0
            sHand.style.transform = `translateX(-50%) rotate(${s*6+m*360}deg)`
            mHand.style.transform = `translateX(-50%) rotate(${m*6+s/10}deg)`
                //0:59 360*0 + 59*6 = 356
                //1:0 360*1 + 0*60 =  360
            hHand.style.transform = `translateX(-50%) rotate(${h*30+m/2}deg)`


        }
        var timer = setInterval(setTime, 1000)
        sHand.style.transform = `translateX(-50%) rotate(${354}deg)`
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            sHand.style.transform = `translateX(-50%) rotate(${0}deg)`
        }

        startBtn = document.getElementById('start');
        pauseBtn = document.getElementById('pause');
        startBtn.onclick = function() {
            timer = setInterval(setTime, 1000)
        }
        pauseBtn.addEventListener('click', function() {
            clearInterval(timer)
        })
    </script>
</body>

</html>